<template>
	<view class="content page" id="checkout_counter" :style="{'--color': color}">
		<status-bar title='支付' :delta='detal'></status-bar>
		<view class="c_ctr_main">
			<view class="c_ctr_info thmeBg" :style="{'--color': color}">
				<view>
					<view>应付</view>
					<view class="price6">
						￥<span class="price6_num">{{total.total_fee?total.total_fee:0}}</span>
					</view>
				</view>
				<image class="img_cover" :src="staticUrl+'/images/checkstand_cover.png'" mode="widthFix"></image>
			</view>
			<view class="c_ctr_list">
				<radio-group @change="pay_select(item)" v-for="(item,index) in payMode" :key="index">
					<label class="c_ctr_item">
						<view class="c_ctr_item_info">
							<view class="c_ctr_item_ico">
								<image :src="$imgUrls(item.img)" class="wx_pay" mode="widthFix"></image>
							</view>
							<view class="c_ctr_item_t" :class="{'color_cc': item.money && parseFloat(item.money) < parseFloat(total.total_fee)}">
								{{ item.title }}<text class="size28" v-if="item.money">(￥{{ item.money }})</text>
							</view>
						</view>
						<view class="fake-radio" :class="{'thmeBorder thmeBg': paytype == item.payType, 'disabled': item.money && parseFloat(item.money) < parseFloat(total.total_fee)}">
							<text class="icon-xuanzhong iconfont"></text>
							<radio :value="item.payType" :checked="paytype == item.payType" />
						</view>
					</label>
				</radio-group>

			</view>
		</view>
		<view class="c_ctr_pay btn3 thmeBg" :style="{'--color': color}" @click="pay_money" v-if='!notEnough'>
			{{payAPP}}￥{{total.total_fee?total.total_fee:0}}
		</view>
		<navigator url='/moneyPage/capital/recharge' hover-class="none" v-else>
			<view class="c_ctr_pay btn3" style="background-color: #ED9648;" @click="pay_money">余额不足，去充值</view>
		</navigator>
	</view>
</template>
<script>
	var that;
	export default {
		data() {
			return {
				color: getApp().globalData.color,
				payFlag: true,
				payAPP: "",
				paytype: '',
				playid: '',
				openId: uni.getStorageSync("openid"),
				total: '',

				mode: uni.getStorageSync('mode'),
				staticUrl: this.staticUrl,
				notEnough: false, // 余额不足	
				cashPay: uni.getStorageSync('startUp').cashPay, // 是否开起线下付款 1开起 0不开启
				payState: uni.getStorageSync('startUp').payState, // 是否开起支付功能 1开起 0不开启
				detal: 1,
				car_id: '',
				tid: '',
				union_order_code: '',
				flag: false,
				pageData: '',
				shwoPop: 0,
				payMode: [] // 支付方式
			}
		},
		onShow() {
			that = this

			if (uni.getStorageSync('path') == '12') { // 支付成功返回
				this.backHome()
			}
			that.notEnough = false;
			that.payFlag = true;

			let options = wx.getEnterOptionsSync();

			if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3' && this.shwoPop == 1) {

				let extraData = options.referrerInfo.extraData;
				if (!extraData) return;
				if (extraData.code == 'success') {
					that.$rectTo('/pages/index/pay_scs?playid=' + that.playid)

				} else if (extraData.code == 'cancel') {
					that.$rectTo('/pages/index/orderList?status=0&clickNav=1')
				} else {
					that.$rectTo('/pages/index/orderList?status=0&clickNav=1')
				}
			}

		},
		onLoad(e) {
			console.log('e', e)
			that = this
			that.playid = e.payid
			if (e.car_id) this.car_id = e.car_id
			if (e.tid) this.tid = e.tid
			if (e.union_order_code) this.union_order_code = e.union_order_code
			that.getPageData();
			if (e.path == 1) { // 从下单页面来的
				that.detal = 2
			}

		},
		onUnload() {
			this.shwoPop = 0
		},
		methods: {
			pay_select: function(item) {
				if(item.money && parseFloat(item.money) < parseFloat(this.total.total_fee)) return
				this.paytype = item.payType
				this.payAPP = item.title
				this.notEnough = false
				if(item.money && parseFloat(item.money) < parseFloat(this.total.total_fee)) this.notEnough = true
			},
			getPageData: function() { //获取页面初始化数据
				that.$http.post({
					url: '/accountPay/getOrderInfo3',
					data: {
						orderAesStr: that.playid,

					}
				}).then(res => {
					if (res.code == 100) {
						that.total = res.data
						that.payMode = res.data.payMode || []
						if(that.payMode.length) {
							let first = that.payMode.find(item => !item.money || parseFloat(item.money) >=  parseFloat(that.total.total_fee))
							if(!first) return
							that.paytype = first.payType
							that.payAPP = first.title
						}
					}
				})
			},
			pay_money: function() {
				if (that.notEnough) { // 余额不足
					return
				}
				if (!that.payFlag) {
					return
				} // 避免重复提交
				that.payFlag = false;
				uni.showLoading({
					title: '支付中···'
				})
				that.$http.post({
					url: '/accountPay/cashierStorePageAjax',
					data: {
						orderAesStr: that.playid,
						payType: that.paytype,
						openId: that.openId
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 100) {
						that.flag = true
						var data = res.data;
						const Result = res.data;
						this.pageData = Result;

						if (that.paytype == 1) { // 微信支付
							// #ifdef MP-WEIXIN
							if (Result.extraData) {
								this.shwoPop = 1
								wx.openEmbeddedMiniProgram({
									appId: Result.appId,
									extraData: Result.extraData
								});
							} else {
								uni.getProvider({
									service: 'oauth',
									success: function(resp) {
										console.log(resp.provider)
										if (resp.provider) {
											uni.requestPayment({
												provider: resp.provider[0],
												orderInfo: data,
												timeStamp: data.timeStamp,
												nonceStr: data.nonceStr,
												package: data.package,
												signType: data.signType,
												paySign: data.paySign,
												success: function(resj) {
													console.log('success:' + JSON
														.stringify(resj));
													that.$rectTo(
														'/pages/index/pay_scs?playid=' +
														that.playid)
												},
												fail: function(err) {
													console.log('fail:' + JSON
														.stringify(err));
													that.$rectTo(
														'/pages/index/orderList?status=0&clickNav=1'
													)
												}
											})
										}
									}
								})
							}
							// #endif
						} else {
							uni.redirectTo({
								url: '/pages/index/pay_scs?playid=' + that.playid
							})
						}
					} else {
						if (that.paytype == 99) { // 货到付款不成功
							uni.navigateTo({
								url: '/pages/index/orderList?status=0&clickNav=1'
							})
							return
						}
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
				})
			}
		},
		onUnload() {
			console.log('flag', this.flag)
			if (this.tid && !this.flag) {
				this.$http.post({
					url: '/singleSaleApi/tableConfirmOrder',
					data: {
						union_order_code: this.union_order_code,
						car_id: this.car_id,
						tid: this.tid
					}
				}).then(res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	radio {
		transform: scale(0.7)
	}

	.wx_pay {
		width: 54upx;
		height: 54upx;
	}

	.price6_num {
		font-size: 60upx;
	}

	#checkout_counter .c_ctr_main {
		background: #ffffff;
	}

	.c_ctr_main .c_ctr_info {
		height: 360upx;
		margin-bottom: 68upx;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: #ffffff;
		position: relative;
	}

	.img_cover {
		height: 38upx;
		width: 100%;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.c_ctr_info .price6 {
		margin-top: 20upx;
	}

	.c_ctr_main .c_ctr_list {
		padding: 0 30upx;
	}

	.c_ctr_list .c_ctr_item {
		height: 112upx;
		border-bottom: 1px solid #dddddd;
		display: flex;
		display: -webkit-flex;
		justify-content: space-between;
		align-items: center;
	}

	.c_ctr_item .c_ctr_item_info {
		display: flex;
		display: -webkit-flex;
		align-items: center;
	}

	.c_ctr_item_info .c_ctr_item_ico {
		width: 56upx;
		height: 56upx;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
	}

	.c_ctr_item_info .c_ctr_item_t {
		width: 560upx;
		margin-left: 20upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 28upx;
		font-family: arial;
	}

	.c_ctr_pay {
		position: fixed;
		right: 0;
		bottom: 30upx;
		left: 0;
		z-index: 999;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	.fake-radio.disabled {
		background: #ebedf0;
		.icon-xuanzhong {
			color: #ebedf0;
		}
	}
</style>